<#setting classic_compatible=true>
<#assign base=request.contextPath />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="../images/favicon.ico" type="image/ico" />
	
	<link rel="stylesheet" type="text/css" href="${base}/zhgl-jzstyxx-manage/css/bootstrap-table.min.css">
	<link rel="stylesheet" type="text/css" href="${base}/zhgl-jzstyxx-manage/css/bootstrap-datetimepicker.min.css">
	<link rel="stylesheet" type="text/css" href="${base}/zhgl-jzstyxx-manage/css/model.css" > 
    <title>队列性能分析</title>
    <!-- 引入通用css和js -->
	<#include "/common/commoncss.ftl">
	<link rel="stylesheet" type="text/css" href="${base}/zhgl-jzstyxx-manage/css/statictics/queueProperty.css">
	
  </head>

  <body class="nav-md">
    
        	<!-- 标题栏区域 -->
			<div class="titleColumn">
				<span class="fa fa-bar-chart-o"></span><span style="margin-left:20px;">统计分析</span>&nbsp;&nbsp;<span class="fa fa-angle-right"></span>&nbsp;&nbsp;<span>队列性能分析</span>
			</div>
			<!-- 图表区域 -->
			<div class="tableColumn">
				<!-- 查询框区域 -->
				<div class="lockColumn">
						<div class="kong"></div>
						<div class="lookdel">
							<span id="searchtime">查询时间</span>
							<select id="sel">
							</select> 
							<button id="searchTable"  style="color:#fff;background: #00796A;"><span class="fa fa-search"></span>&nbsp;查询</button>
						</div>
				</div>
				<!-- 查询框区域结束 -->
				
				<!-- 图表区域开始 -->
				<div class="charts">
					<div class="chart-f" id="chart-f">
					
					</div>
					<div class="chart-s" id="chart-s">
					
					
					</div>
				</div>
				<!-- 图表区域结束 -->
		</div>


	<#include "/common/commonjs.ftl">
	<script src="${base}/zhgl-jzstyxx-manage/vendors/moment.min.js"></script>
<!-- 	<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/bootstrap-datetimepicker.js"></script>
	<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/bootstrap-datetimepicker.zh-CN.js"></script> -->
	<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/echarts.js"></script>
	<script type="text/javascript">
		var myDate=new Date();
		var year=myDate.getFullYear();
		var month=myDate.getMonth()+1;
		var day=myDate.getDate();
		var time=year+"年"+month+"月"+day+"日 ";
		var topicList=[];
		var messageList=[];
		var nums=[];
		var hours=["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00","24:00"];
		var counts=[];
		var mcounts=[];
		</script>
	<!-- 这是第一个echars表格 --> 
	<script type="text/javascript">
		/****根据时间，获取本日延迟数据****/
		$.ajax({
			"url" : "/zhgl-jzstyxx-manage/index/getTodayDelayByTime",
			"type" : "post",
			"dataType" : "JSON",
			"success" : function(obj) {
				for (var i = 0; i <= 9; i++) {
					var t0i;
					t0i = obj['0' + i];
					nums.push(t0i);
				}
				for (var i = 10; i <= 24; i++) {
					var ti;
					ti = obj[i].toFixed(2);
					nums.push(ti);
				}
				//把ajax拿到的y坐标的值赋值给data
				getTodayDelayByTime(nums, hours);
			}
		});//ajax结束
		
		/****根据主题队列，获取本日延迟数据****/
		$.ajax({
			"url":"/zhgl-jzstyxx-manage/index/getTodayDelayByTopic",
			"type":"post",
			"dataType":"JSON",
			"success":function(obj){
				for(var i=0;i<obj[0].length;i++){
					topicList.push(obj[0][i]);
					messageList.push(obj[1][i].toFixed(2));
				}
				getTodayDelayByTopic(topicList,messageList);
			}
		});//ajax结束
		/***根据时间，获取本日延迟数据***/
		function getTodayDelayByTime(nums, hours){
			//初始化echars实例
			var myChart = echarts.init(document.getElementById('chart-f'));
			//自定义表格配置项
			var option = {
				//表格背景颜色
				backgroundColor : '#10D09F',
				//标题样式
				title : {
					text :  time+'各时间段消息发送延迟',
					/* subtext: '单位: 毫秒', */
					textStyle : {
						fontSize : 14,
						color : '#fff',
					},
					subtextStyle:{
						fontSize : 12,
						color : '#fff',
					},
					x : 55,
					y : 10,
				},
				//提示框，鼠标悬浮交互时的信息提示
				tooltip : {
					trigger : 'axis',
					formatter:function(a){
			    		return a[0].name+"<br/>"
			    		+a[0].seriesName+":"+a[0].value+"毫秒<br/>"
			    	}
				},
				toolbox:{
					show:true,
					color:['#1e90ff','#22bb22','#4b0082','#d2691e'],
					backgroundColor:'rgba(255,255,255,0.8)',
					feature:{
						mark:{show:true},//辅助线开关
						dataView:{show:true,readOnly:false},//数据视图
						magicType:{//图表间切换
							show:true,
							type:['line','bar'],
						},
						restore:{show:true,title:'还原',color:'black'},//还原
						saveAsImage:{show:true,title:'保存为图片',type:'png',lang:['点击保存']},//是否保存
					}
				},
				//是否启用拖拽重计算特性
				calculable : true,
				//X轴设计
				xAxis : [ {
					type : 'category',
					name:'时间',
					/* boundaryGap : false, *///是否以原点为中心
					axisLabel : {
						show : true,
						textStyle : {
							color : '#fff',
						},
						interval:0,
						rotate:30,
					},
					axisLine : {
						lineStyle : {
							color : '#fff',
						},
					},
					axisTink : {
						show : false,
					},
					splitLine : {
						show : false,
					},
					data :hours
				} ],
				//Y轴设计
				yAxis : [ {
					type : 'value',
					name:'单位: 毫秒',
					axisLabel : {
						formatter : '{value}',
						textStyle : {
							color : '#fff',
						},
					},
					axisLine : {
						lineStyle : {
							color : '#fff',
						},
					},
					axisTink : {
						show : false,
					},
					splitLine : {
						show : false,
					},
				} ],
				series : [
						{
							name : '延迟毫秒',
							type : 'bar',
							data : nums,
							barWidth : 30,
							itemStyle : {
								emphasis : {
									barBorderRadius : 30,
								},
								normal : {
									barBorderRadius : [ 20, 20, 0, 0 ],
									color : '#fff',
								},
							},
							markPoint : {
								itemStyle : {
									show : true,
									color : '#333',
								},
								data : [ {
									type : 'max',
									name : '最大值'
								}, {
									type : 'min',
									name : '最小值'
								} ]
							},
						}, ]
			};
			//使用指定上午配置型和数据显示图表
			myChart.setOption(option);
		}
		/***根据主题队列，获取本日各主题延迟数据***/
		function getTodayDelayByTopic(topicList,messageList){
			//初始化echars实例
			var myChart = echarts.init(document.getElementById('chart-s'));
			//自定义表格配置项
			var option = {
					//表格背景颜色
					backgroundColor:'#5396C0',
					//标题样式
				    title : {
				        text:time+ '各主题队列消息发送延迟',
				        /* subtext: '纯属虚构' */
						textStyle:{
							fontSize:14,
							color:'#fff',
						},
						x:55,
						y:10,
				    },
					//提示框，鼠标悬浮交互时的信息提示
				    tooltip : {
				        trigger: 'axis',
						formatter:function(a){
				    		return a[0].name+"<br/>"
				    		+a[0].seriesName+":"+a[0].value+"毫秒<br/>"
				    	}
				    },
					toolbox:{
						show:true,
						color:['#1e90ff','#22bb22','#4b0082','#d2691e'],
						backgroundColor:'rgba(255,255,255,0.8)',
						feature:{
							mark:{show:true},//辅助线开关
							dataView:{show:true,readOnly:false},//数据视图
							magicType:{//图表间切换
								show:true,
								type:['line','bar'],
							},
							restore:{show:true,title:'还原',color:'black'},//还原
							saveAsImage:{show:true,title:'保存为图片',type:'png',lang:['点击保存']},//是否保存
						}
					},
					 //是否启用拖拽重计算特性
				    calculable : true,
				    //X轴设计
				    xAxis : [
				        {
				            type : 'category',
							/* boundaryGap : false, *///是否以原点为中心
							name:'主题队列',
							axisLabel:{
								show:true,
								textStyle:{
									color:'#fff',
								},
								interval:0,
								rotate:30,
							},
							axisLine:{
								lineStyle:{
									color:'#fff',
								},
							},
							axisTink:{
								show:false,
							},
							splitLine:{
								show:false,
							},
				            data :topicList,
				        }
				    ],
				    //Y轴设计
				    yAxis : [
				        {
				            type : 'value',
				            name:'单位: 毫秒',
							axisLabel:{
								formatter:'{value}',
								textStyle:{
									color:'#fff',
								},
							},
							axisLine:{
								lineStyle:{
									color:'#fff',
								},
							},
							axisTink:{
								show:false,
							},
							splitLine:{
								show:false,
							},
				        }
				    ],
				    series : [
				        {
				            name:'延迟毫秒',
				            type:'bar',
				            data:messageList,
				            barWidth:30,
				            itemStyle:{
				            	emphasis:{
				            		barBorderRadius:30,
				            	},
				            	normal:{
				            		barBorderRadius:[20,20,0,0],
				            		color:'#fff',
				            	},
				            },
				            markPoint : {
				            	itemStyle:{
				            		show:true,
				            		color:'#333',
				            	},
				                data : [
				                    {type : 'max', name: '最大值'},
				                    {type : 'min', name: '最小值'}
				                ]
				            },
				        },
				    ]
				};
			//使用指定上午配置型和数据显示图表
			myChart.setOption(option);
		}
		</script>
	<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/statictics/queueProperty.js"></script>
  </body>
</html>
